<template>
	<view class="topBox">
			<view class="userBox">
				<view @click="postLogin" class="userBoxLeft">
					<image
						class="userImg"
						:src="isLogin && userInfo && userInfo.headerImage ? userInfo.headerImage : 'https://res.qiguoread.com/staticResources/fellow_townsman/image/icon_mr_tx.png'"
					></image>
					<view v-if="isLogin" class="loginBtn">
						<view class="loginText">{{ userInfo.nickName }}</view>
						<view style="font-size: 28rpx;margin-top: 10rpx;color: white;color: #B8B8B8;">
							用户ID：{{ userInfo && userInfo.productUserId ? userInfo.productUserId : '' }}
						</view>
					</view>
					<view v-if="!isLogin" class="loginBtn"><span class="loginText">登录</span></view>
				</view>
				<!-- <view class="userBoxRight">					
					<image @click="toSetPage" style="width: 44rpx;height: 44rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_set.png"></image>
				</view> -->
			</view>
			<view class="wealthBox" :class="isSsVip ? 'width-small' : ''">
				<view class="wealthItem">
					<view class="wealthItemTop">
						<text style="color: #FF6FA2;font-size: 50rpx;font-weight: bold;margin-right: 5rpx;">0</text>
						张
					</view>
					<view class="wealthItemBottom">我的卡包</view>
				</view>
				<view class="wealthItem" @tap="handlePocketPage">
					<view class="wealthItemTop">
						<text style="color: #FF6FA2;font-size: 50rpx;font-weight: bold;margin-right: 5rpx;">{{balance | fruitNum10}}</text>
						枚
					</view>
					<view class="wealthItemBottom">我的{{moneyName}}</view>
				</view>
				<view v-if="!isSsVip" @click="showCz" class="wealthItem"><view class="czBtn">充值{{moneyName}} ></view></view>
			</view>

			<template v-if="isConfigSsVip || isSsVip">
				<view v-if="!isSsVip" class="ssVip-box">
					<image class="bg-box" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/member_img2.png" />
					<view class="content-box flex justify-between align-center">
						<view class="flex flex-direction">
							<text class="text-box1">开通VIP会员</text>
							<text class="text-box2">低至1元/天，365/年全站免费观看</text>
						</view>
						<text class="btn-set" @click="handleSubmitOrder">立即开通</text>
					</view>
				</view>
				<view v-else class="ssVip-box">
					<image class="bg-box" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/member_img2.png" />
					<view class="content-box flex justify-between align-center">
						<view class="flex flex-direction">
							<text class="text-box1 text-gold-set">尊贵的超级VIP</text>
							<text class="text-box2 text-gold-set">您的会员将于 {{ timeFormatNew(ssVipMessExpirationTime) }} 到期</text>
						</view>
					</view>
				</view>
			</template>
		</view>
</template>

<script>
	const util = require('@/util/util.js');
	export default {
		props:{
			isLogin:{
				default:false,
				type:Boolean
			},
			balance:{
				default:0,
				type:Number
			},
			userInfo:{
				default:()=>{
					return {}
				},
				type:Object
			}
		},
		data() {
			return {
				moneyName:this.moneyName,
				isConfigSsVip: getApp().globalData.isConfigSsVip,
				ssVipMessExpirationTime: getApp().globalData.ssVipMessExpirationTime,
				isSsVip: false,
				copyGroupLink: '',
				copyLinkStatus: ''
			}
		},
		methods: {
			async getCopyLinkKs() {
				try {
					let res = await this.getConfigKs()
					this.copyGroupLink = res.copyGroupLink
					this.copyLinkStatus = res.copyLinkStatus
				} catch (error) {
					console.log(error)
				}
			},
			// 会员订单提交
			handleSubmitOrder: util.throttle(async function() {
				try {
					uni.showLoading({
						title: '加载中'
					})
					// 获取ssVip会员信息
					let memberInfoSsVip = uni.getStorageSync('memberInfoSsVip')
					let {
						packageId 
					} = memberInfoSsVip
					console.log(memberInfoSsVip)
					let configMess = await getApp().getMemberMess(this, packageId)

					console.log(configMess)
					// 模板提交
					let temObj = {
						packageId: packageId,
						moneyFen:  configMess[0] ? configMess[0].nowMoneyFen : 36500
					}
					let resDataSub = await getApp().subMemberOrder(this, temObj)
					console.log(resDataSub)
					let {
						kuaiShouApi,
						orderId
					} = resDataSub

					let orderInfo = {
						order_no: kuaiShouApi.orderNo,
						order_info_token: kuaiShouApi.orderInfoToken
					}
					// 头条支付
					await getApp().ksPaySub(orderInfo)

					// 支付完成上报
					let orderMess = await getApp().czSucc(this, orderId)
					console.log('121212--------', orderMess)
					if (orderMess && orderMess.payStatus == 'BE_READY') {
						if(this.copyLinkStatus && this.copyGroupLink) {
							this.copyWatchword(this.copyGroupLink)
						}
						// 更新会员状态
						this.memberStatusUpdate()
					}
				} catch (error) {
					console.log(error)
				} finally {
					// 更新会员状态
					await getApp().getMemberTt(this)
					uni.hideLoading()
				}
			}, 2000),
			async memberStatusUpdate() {
				await getApp().getMemberTt(this)
				this.isConfigSsVip = getApp().globalData.isConfigSsVip
				this.ssVipMessExpirationTime = getApp().globalData.ssVipMessExpirationTime
				this.isSsVip = getApp().checkMemberSsVip()
			},
			copyWatchword(val, type) {
				// 群口令曝光
				this.$uma && this.$uma.trackEvent('Ume_password', {
					name: 'Ume_password_Internet_celebrity_PV'
				});
				uni.setClipboardData({
					data: val,
					success: function() {
						this.$uma && this.$uma.trackEvent('Ume_password', {
							name: 'Ume_password_Ic_paycopy_win'
						});
					},
					fail: function () {
						this.$uma && this.$uma.trackEvent('Ume_password', {
							name: 'Ume_password_Ic_paycopy_Defeat'
						});
					}
				});
			},
			timeFormatNew(val) {
				return val ? util.dateFormat(val) : '未知'
			},
			postLogin(){
				this.$emit('postLogin');
			},
			showCz(){
				this.$emit('showCz');
			},
			toSetPage(){
				uni.navigateTo({
					url:'../setPage/setPage'
				})
			},
			handlePocketPage() {
				uni.navigateTo({
					url:'../pay_page/pay_page'
				})
			},
		},
		onReady() {
		},
		created() {
			let messVip = uni.getStorageSync('memberInfoSsVip')
			this.isConfigSsVip = getApp().globalData.isConfigSsVip
			this.ssVipMessExpirationTime = messVip ? messVip.expirationTime : ''
			if(this.ssVipMessExpirationTime) {
				this.isSsVip = getApp().checkMemberSsVip()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sequence {
		text-align: center;
		line-height: 59rpx;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		position: absolute;
		bottom: 0;
		width: 92%;
		padding: 0 4%;
		margin: auto;
		left: 0;
		right: 0;
		height: 59rpx;
		z-index: 88;
		background: rgba(0, 0, 0, 0.5);
		color: white;
		font-size: 28rpx;
	}
	.imgItem{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.seq{
		text-align: center;
		line-height: 52rpx;
		width: 174rpx;
		height: 52rpx;
		color: #FD6F9F;
		font-size: 26rpx;
		border-radius: 26rpx;
		margin-bottom: 30rpx;
		margin-top: 16rpx;
		border: 1rpx solid #E1E1E1;
	}
	.noCard {
		width: 90vw;
		height: 200rpx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
	}
	.content {
		display: flex;
		flex-wrap: wrap;
		width: 100vw;
		padding: 0 2%;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.loadMore {
		background-color: #ffffff;
		padding: 0 23rpx;
		position: relative;
		z-index: 11;
	}
	.loadMoreBox::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 90vw;
		height: 2rpx;
		background-color: #d9d9d9;
		margin: auto;
	}
	.loadMoreBox {
		position: relative;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100vw;
		font-size: 22rpx;
		color: #c3c3c3;
	}
.imgBox {
	overflow: hidden;
	position: relative;
	width: 230rpx;
	border-radius: 13rpx;
	height: 342rpx;
}
.wealthBox {
	.czBtn {
		font-size: 28rpx;
		width: 209rpx;
		height: 67rpx;
		background: linear-gradient(339deg, #f36d86 0%, #ff70a2 100%);
		border-radius: 34rpx;
		line-height: 67rpx;
		color: white;
		text-align: center;
	}
	padding: 28rpx 0;
	width: 90vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	&.width-small {
		width: 60vw;
	}
	.wealthItem {
		.wealthItemBottom {
			color: #333333;
			font-size: 28rpx;
		}
		.wealthItemTop {
			font-size: 28rpx;
			color: #999999;
		}
		justify-content: center;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
}
.version {
	width: 100vw;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #ccc;
	font-weight: bold;
	position: absolute;
	left: 0;
	bottom: 30rpx;
}
.userBoxLeft {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.navTop {
	position: fixed;
	top: 0;
	left: 0;
}
.lineLeft {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 50rpx;
}
.line {
	border-bottom: 1rpx solid rgba(221, 221, 221, 1);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;
	line-height: 80rpx;
}
.container {
	flex-direction: column;
	height: 100%;
}
.btn-cz {
	width: 180rpx;
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	padding: 0 30rpx;
	background: linear-gradient(to right, #ffff82, #ffa631);
	border-radius: 36rpx;
	font-size: 28rpx;
	color: #6e4c20;
}
.userBox {
	width: 90%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.moneyText {
		padding-left: 10rpx;
		margin-top: 12rpx;
		font-size: 30rpx;
		color: #333333;
	}
	.loginBtn {
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		.loginText {
			font-weight: bold;
			font-size: 36rpx;
			color: black;
		}
	}
	.userImg {
		margin-right: 22rpx;
		width: 122rpx;
		height: 122rpx;
		border-radius: 50%;
	}
}
	.container999{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
.topBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	height: inherit;
	background-size: 100% 120%;
}

.ssVip-box {
	position: relative;
	width: 672rpx;
	height: 129rpx;
	margin: 30rpx auto;
	.bg-box {
		width: 672rpx;
		height: 129rpx;
		display: table-cell;
	}
	.content-box {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 23rpx 32rpx 23rpx 42rpx;
		.text-box1 {
			line-height: 45rpx;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 3rpx;
			color: #FFF6E7;
		}
		.text-box2 {
			line-height: 37rpx;
			font-size: 26rpx;
			font-weight: 400;
			margin-bottom: 3rpx;
			color: #FFF6E7;
		}

		.btn-set {
			padding: 0 23rpx;
			height: 51rpx;
			line-height: 51rpx;
			text-align: center;
			border-radius: 26rpx;
			background: linear-gradient(215deg, #F8CEBC 0%, #DAA880 100%);
			color: #292929;
			font-size: 27rpx;
		}
	}
}
</style>
